<template>
  <div>
    <div class="hk_mother">
      <el-table
        @row-click="cellClicks"
        :data="tableData"
        style="width: 100%"
        header-row-class-name="header_stock"
        :max-height="height"
        class="stock_list_table"
        @sort-change="sortFor"
        :cell-class-name="tableCellClass"
        ref="chatContent"
      >
        <el-table-column
          fixed
          :label="$t('stock.stock_all.56hzirny8780')"
          min-width="50"
          class-name="stock_list_left"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          fixed
          :label="$t('m.StockCode')"
          min-width="120"
          class-name="stock_list_left"
          prop="symbol"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.symbol }}</template>
        </el-table-column>
        <el-table-column
          fixed
          :label="$t('stock.stock_all.56hzirny8sk0')"
          min-width="150"
          class-name="stock_list_left"
          prop="name"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <!-- 最新价 -->
        <el-table-column
          :label="$t('m.latestPrice')"
          sortable="custom"
          prop="latestPrice"
          class-name="stock_list_center"
          min-width="100"
        >
          <template slot-scope="scope">
            <div
              :class="
                scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
              "
            >
              {{ scope.row.latestPrice | toFixed(scope.row.precision) }}
            </div>
          </template>
        </el-table-column>
        <!-- 涨跌额 -->
        <el-table-column
          :label="$t('stock.stock_all.56hzirny8ww0')"
          class-name="stock_list_center"
          sortable="custom"
          prop="chg"
          min-width="100"
        >
          <template slot-scope="scope">
            <h2
              :class="
                scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
              "
            >
              <span>
                {{ scope.row.chg > 0 ? "+" : ""
                }}{{ Number(scope.row.chg).toFixed(scope.row.precision) }}
              </span>
            </h2>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('m.quoteChange')"
          class-name="stock_list_center"
          sortable="custom"
          prop="gain"
          min-width="100"
        >
          <template slot-scope="scope">
            <h2
              :class="
                scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
              "
            >
              <span>
                {{ scope.row.gain > 0 ? "+" : ""
                }}{{ Number(scope.row.gain * 100).toFixed(2) + "%" }}
              </span>
            </h2>
          </template>
        </el-table-column>
        <!-- 买入价 -->
        <!-- <el-table-column
          :label="$t('m.buyingPrice')"
          sortable="custom"
          prop=""
          class-name="stock_list_center"
          min-width="100"
          v-if="level != 0"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.bidPrice) | toFixed(3) }}</div>
          </template>
        </el-table-column> -->
        <!-- 卖出价 -->
        <!-- <el-table-column
          :label="$t('stock.stock_all.56hzirny91g0')"
          sortable="custom"
          prop=""
          class-name="stock_list_center"
          min-width="100"
          v-if="level != 0"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.askPrice) | toFixed(3) }}</div>
          </template>
        </el-table-column> -->
        <!-- 买量 -->
        <!-- <el-table-column
          :label="$t('stock.stock_all.56hzirny94g0')"
          sortable="custom"
          prop=""
          class-name="stock_list_center"
          min-width="80"
          v-if="level != 0"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.bidVol }}</div>
          </template>
        </el-table-column> -->
        <!-- 卖量 -->
        <!-- <el-table-column
          :label="$t('stock.stock_all.56hzirny97k0')"
          sortable="custom"
          prop=""
          class-name="stock_list_center"
          min-width="80"
          v-if="level != 0"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.askVol }}</div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="volume"
          :label="$t('m.Volume')"
          class-name="stock_list_center"
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.volume">
              {{ scope.row.volume | changeNum(te) }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          :label="$t('m.Turnover')"
          class-name="stock_list_center"
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.amount">
              {{ scope.row.amount | changeNum(te) }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 股息 -->
        <el-table-column
          prop="dividend"
          :label="$t('m.dividend')"
          class-name="stock_list_center"
          sortable="custom"
          min-width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.dividend != 0">{{
              Number(scope.row.dividend) | toFixed(3)
            }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 今开 -->
        <el-table-column
          :label="$t('m.OpenToday')"
          sortable="custom"
          prop="open"
          class-name="stock_list_center"
          min-width="80"
        >
          <template slot-scope="scope">
            <div
              :class="
                scope.row.open > scope.row.close
                  ? 'red'
                  : scope.row.open < scope.row.close
                  ? 'green'
                  : ''
              "
            >
              <span v-if="scope.row.open">{{
                Number(scope.row.open) | toFixed(scope.row.precision)
              }}</span>
              <span v-else>--</span>
            </div>
          </template>
        </el-table-column>
        <!-- 昨收 -->
        <el-table-column
          :label="$t('m.closed_yesterday')"
          sortable="custom"
          prop="close"
          class-name="stock_list_center"
          min-width="110"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.close">{{
                Number(scope.row.close) | toFixed(scope.row.precision)
              }}</span>
              <span v-else>--</span>
            </div>
          </template>
        </el-table-column>
        <!-- 最高 -->
        <el-table-column
          :label="$t('m.highest')"
          sortable="custom"
          prop="high"
          class-name="stock_list_center"
          min-width="80"
        >
          <template slot-scope="scope">
            <div
              :class="
                scope.row.high > scope.row.close
                  ? 'red'
                  : scope.row.high < scope.row.close
                  ? 'green'
                  : ''
              "
            >
              <span v-if="scope.row.high">{{
                Number(scope.row.high) | toFixed(scope.row.precision)
              }}</span>
              <span v-else>--</span>
            </div>
          </template>
        </el-table-column>
        <!-- 最低 -->
        <el-table-column
          :label="$t('m.lowest')"
          sortable="custom"
          prop="low"
          class-name="stock_list_center"
          min-width="80"
        >
          <template slot-scope="scope">
            <div
              :class="
                scope.row.low > scope.row.close
                  ? 'red'
                  : scope.row.low < scope.row.close
                  ? 'green'
                  : ''
              "
            >
              <span v-if="scope.row.low">{{
                Number(scope.row.low) | toFixed(scope.row.precision)
              }}</span>
              <span v-else>--</span>
            </div>
          </template>
        </el-table-column>
        <!-- 换手率 -->
        <el-table-column
          prop="turnover"
          sortable="custom"
          :label="$t('m.TurnoverRate')"
          class-name="stock_list_center"
          min-width="100"
        >
          <template slot-scope="scope">{{
            scope.row.turnover == 0
              ? "--"
              : (scope.row.turnover * 100).toFixed(2) + "%"
          }}</template>
        </el-table-column>
        <!-- 振幅 -->
        <el-table-column
          :label="$t('m.amplitude')"
          sortable="custom"
          prop="amplitude"
          class-name="stock_list_center"
          min-width="110"
        >
          <template slot-scope="scope">
            {{
              scope.row.amplitude == 0
                ? "--"
                : (scope.row.amplitude * 100).toFixed(2) + "%"
            }}
          </template>
        </el-table-column>
        <!-- 市盈率 -->
        <el-table-column
          :label="$t('m.P_ratio')"
          sortable="custom"
          prop="pe"
          class-name="stock_list_center"
          min-width="100"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.pe">
              {{ Number(scope.row.pe) | toFixed(2) }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <!-- 市净率 -->
        <el-table-column
          :label="$t('m.PriceRatio')"
          sortable="custom"
          prop="pb"
          class-name="stock_list_center"
          min-width="110"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.pb">
              {{ Number(scope.row.pb) | toFixed(2) }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <!-- 总市值 -->
        <el-table-column
          prop="marketValue"
          :label="$t('m.total_market')"
          class-name="stock_list_center"
          sortable="custom"
          min-width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.marketValue">
              {{ scope.row.marketValue | changeNum(te) }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 总股本 -->
        <el-table-column
          prop="totalShares"
          :label="$t('m.Total_equity')"
          class-name="stock_list_center"
          sortable="custom"
          min-width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.totalShares">
              {{ scope.row.totalShares | changeNum(te) }}
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- 融资保证金率 -->
        <el-table-column
          :label="$t('stock.stock_all.56hzirny9ag0')"
          prop=""
          class-name="stock_list_center"
          min-width="150"
        >
          <template slot-scope="scope">
            <div>
              {{
                scope.row.buyLongRate == 0
                  ? "--"
                  : (Number(scope.row.buyLongRate) * 100).toFixed(0) + "%"
              }}
            </div>
          </template>
        </el-table-column>
        <!-- 融券保证金率 -->
        <el-table-column
          :label="$t('stock.stock_all.56hzirny9d80')"
          prop=""
          class-name="stock_list_center"
          min-width="150"
        >
          <template slot-scope="scope">
            <div>
              {{
                scope.row.shortSellRate == 0
                  ? "--"
                  : (Number(scope.row.shortSellRate) * 100).toFixed(0) + "%"
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :hide-on-single-page="isShowPag"
        :page-size="40"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["sortList", "value", "plateId", "type"],
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  inject: ["reload"],
  data() {
    return {
      height: null,
      tableData: [],
      loading: true,
      level: null,
      lang: "", // 当前语言
      currentPage: 1, // 当前页
      pageSize: 0, // 列表请求条数
      currentSumbit: {}, // 当前提交对象
      setTime: null, // 当前沪深股定时器
      total: 400,
      isShowPag: false,
    };
  },
  mounted() {
    this.$nextTick(function () {
      if (this.type == "HK") {
        this.height = $(window).height() - 170 - 40;
      } else {
        this.height = $(window).height() - 145 - 40;
      }
    });
    var box = this.$refs.chatContent.bodyWrapper;
    box.addEventListener("scroll", this.paperScroll);
    this.lang = localStorage.getItem("lang");
    this.currentSumbit = this.sortList.submit;
    let windowHight = window.innerHeight;
    let tableHight = windowHight - 50 - 41 - 40;
    this.pageSize = Math.floor(tableHight / 40) - 3;
    console.log(this.type, windowHight, this.pageSize, "浏览器高度");
    this.$set(this.currentSumbit, "pageSize", this.pageSize);
    this.getdata();
    if (this.pageSize > this.total) {
      this.isShowPag = true;
    } else {
      this.isShowPag = false;
    }
  },
  beforeDestroy() {
    if (this.setTime) {
      clearInterval(this.setTime);
      this.setTime = null;
    }
  },
  methods: {
    // 当前页改变
    handleCurrentChange(page) {
      this.currentSumbit.page = page;
      this.getdata();
    },
    cellClicks(row) {
      console.log(row, "Details_data");
      var StockData = {
        securityType: row.securityType,
        symbol: row.symbol,
        market: row.market,
      };
      if (
        !this.hkActive &&
        !this.shActive &&
        !this.usActive &&
        !this.zixuanActive
      ) {
        // 当任意股票市场的右侧弹框打开存储上上一次的值用于跳到行情页面时回复到原值
        this.$store.dispatch("SetObserveStrock", this.StockDatas);
      }
      this.$store.dispatch("SetStockData", StockData);
      this.$emit("ListClick", true);
    },
    sortFor(column) {
      // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
      this.currentSumbit.order = column.order;
      this.currentSumbit.field = column.prop;
      this.currentSumbit.page = 1;
      if (column.order == "ascending") {
        this.currentSumbit.order = "ASC";
      } else if (column.order == "descending") {
        this.currentSumbit.order = "DESC";
      } else {
        this.currentSumbit.order = "";
      }
      this.tableData = [];
      this.getdata();
    },
    async getdata() {
      if (Object.keys(this.currentSumbit).length == 0) return;
      const res = await this.$axios.post(this.sortList.url, {
        ...this.currentSumbit,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      this.tableData = [...res.data.list];
      this.tableData.forEach(function (res) {
        res.latestPrice = parseFloat(res.latestPrice);
        res.chg = parseFloat(res.chg);
        res.gain = parseFloat(res.gain);
        res.volume = parseFloat(res.volume);
        res.amount = parseFloat(res.amount);
        res.dividend = parseFloat(res.dividend);
        res.open = parseFloat(res.open);
        res.pb = parseFloat(res.pb);
        res.pe = parseFloat(res.pe);
        res.close = parseFloat(res.close);
        res.low = parseFloat(res.low);
        res.high = parseFloat(res.high);
        res.amplitude = parseFloat(res.amplitude);
        res.totalShares = parseFloat(res.totalShares);
        res.buyLongRate = parseFloat(res.buyLongRate);
        res.shortSellRate = parseFloat(res.shortSellRate);
      });
      this.level = this.$store.state.index.level[
        `${this.sortList.submit.type}`
      ].level;
      // 当前等级大于1，获取推送，切换获取推送
      this.addMarketList(this.sortList.submit.type, this.level, this.tableData);
    },
    conversion(string) {
      return parseFloat(string);
    },
    // 名称排序
    sortName(obj1, obj2) {
      let str1, str2;
      if (this.lang == "en") {
        if (!obj1.name_en) str1 = obj1.name;
        else str1 = obj1.name_en;
        if (!obj2.name_en) str2 = obj2.name;
        else str2 = obj2.name_en;
      } else {
        if (!obj1.name) str1 = obj1.name_en;
        else str1 = obj1.name;
        if (!obj2.name) str2 = obj2.name_en;
        else str2 = obj2.name;
      }
      let res = 0;
      for (let i = 0; ; i++) {
        if (!str1[i] || !str2[i]) {
          res = str1.length - str2.length;
          break;
        }
        const char1 = str1[i];
        const char1Type = this.getChartType(char1);
        const char2 = str2[i];
        const char2Type = this.getChartType(char2);
        // 类型相同的逐个比较字符
        if (char1Type[0] === char2Type[0]) {
          if (char1 === char2) {
            continue;
          } else {
            if (char1Type[0] === "zh") {
              res = char1.localeCompare(char2);
            } else if (char1Type[0] === "en") {
              res = char1.charCodeAt(0) - char2.charCodeAt(0);
            } else {
              res = char1 - char2;
            }
            break;
          }
        } else {
          // 类型不同的，直接用返回的数字相减
          res = char1Type[1] - char2Type[1];
          break;
        }
      }
      return res;
    },
    getChartType(char) {
      // 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
      if (/^[\u4e00-\u9fa5]$/.test(char)) {
        return ["zh", 300];
      }
      if (/^[a-zA-Z]$/.test(char)) {
        return ["en", 200];
      }
      if (/^[0-9]$/.test(char)) {
        return ["number", 100];
      }
      return ["others", 999];
    },
    // 呼吸灯
    tableCellClass({ row, column, rowIndex, columnIndex }) {
      if (row.isBreath >= 3) {
        if (columnIndex == 3 || columnIndex == 4 || columnIndex == 5) {
          if (row.gain > 0) return "red_breathing";
          else if (row.gain < 0) return "green_breathing";
          else return "";
        }
        return "";
      }
    },
    // 订阅市场
    subWsMarket(list) {
      let wsList = [];
      list.forEach((item) => {
        let objs = {};
        this.$set(objs, "market", item.market);
        this.$set(objs, "securityType", item.securityType);
        this.$set(objs, "action", "Q");
        this.$set(objs, "symbol", item.symbol);
        wsList.push(objs);
      });
      console.log("list", wsList, list);
      // 将当前页面的数据放入推送
      if (this.wsMarket) {
        // 如果存在当前列表的推送先取消订阅
        if (this.heartbeat) {
          this.heartbeat.delSubscribe(JSON.parse(this.wsMarket));
        }
      }
      this.$store.dispatch("SetWsMarket", JSON.stringify(wsList));
      // 发起推送
      this.heartbeat.webSocketOpen(wsList);
    },
    // 大盘数据是爬取搜索引擎的，5分钟刷新一次数据，因此做3分钟请求沪深接口，
    async refreshCN() {
      let _this = this;
      if (Object.keys(_this.currentSumbit).length == 0) return;
      const res = await _this.$axios.post(this.sortList.url, {
        ..._this.currentSumbit,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      if (res.data.list.length > 0) {
        res.data.list.forEach((item) => {
          for (let i = 0; i < _this.tableData.length; i++) {
            if (
              item.symbol == _this.tableData[i].symbol &&
              item.latestPrice != _this.tableData[i].latestPrice
            ) {
              let isBreaths;
              // 如果股票价格更新了5,4,3次时呼吸灯闪烁2,1,0不闪
              if (
                !_this.tableData[i].isBreath ||
                _this.tableData[i].isBreath == 6
              )
                isBreaths = 6;
              else isBreaths = _this.tableData[i].isBreath;
              isBreaths = isBreaths - 2;
              _this.$nextTick(() => {
                _this.$set(_this.tableData, i, item);
                _this.$set(_this.tableData[i], "isBreath", isBreaths);
              });
              break;
            }
          }
        });
      }
    },
    // 判断是否添加进推送队列
    addMarketList(market, level, list) {
      // 沪深市场
      if (this.setTime) {
        clearInterval(this.setTime);
        this.setTime = null;
      }
      if (market == "CN") {
        if (level == 2) {
          this.subWsMarket(list);
        } else if (level == 1) {
          // 3分钟刷新数据
          if (!this.setTime) {
            this.setTime = setInterval(() => {
              this.refreshCN();
            }, 3 * 60 * 1000);
          }
        }
      } else if (market == "HK") {
        if (level == 2) {
          this.subWsMarket(list);
        }
      } else if (market == "US") {
        if (level == 1) {
          this.subWsMarket(list);
        }
      }
    },
  },
  computed: {
    StockDatas() {
      return this.$store.state.index.StockData;
    },
    hkActive() {
      return this.$store.state.index.hkActive;
    },
    shActive() {
      return this.$store.state.index.shActive;
    },
    usActive() {
      return this.$store.state.index.usActive;
    },
    zixuanActive() {
      return this.$store.state.index.zixuanActive;
    },
    heartbeat() {
      return this.$store.state.wsModel.heartbeat;
    },
    wsMarket() {
      return this.$store.state.wsModel.wsMarket;
    },
    wsMarketInfo() {
      return this.$store.state.wsModel.wsMarketInfo;
    },
  },
  watch: {
    plateId(val) {
      (this.tableData = []), this.getdata();
    },
    // 当前市场当前页推送
    wsMarketInfo: {
      handler(val) {
        var _this = this;
        if (val != "") {
          for (let i = 0; i < data.length; i++) {
            if (_this.tableData.length > 0) {
              for (let j = 0; j < _this.tableData.length; j++) {
                if (
                  _this.tableData[j].symbol == data[i].symbol &&
                  _this.tableData[j].market == data[i].market &&
                  _this.tableData[j].securityType == data[i].securityType
                ) {
                  if (data[i].gain && data[i].latestPrice) {
                    if (data[i].latestPrice != _this.tableList[j].latestPrice) {
                      let isBreaths;
                      // 如果股票价格更新了5,4,3次时呼吸灯闪烁2,1,0不闪
                      if (
                        !_this.tableList[j].isBreath ||
                        _this.tableList[j].isBreath == 6
                      )
                        isBreaths = 6;
                      else isBreaths = _this.tableList[j].isBreath;
                      isBreaths--;
                      _this.$nextTick(() => {
                        _this.$set(
                          _this.tableData[j],
                          "latestPrice",
                          data[i].latestPrice
                        );
                        _this.$set(_this.tableData[j], "high", data[i].high);
                        _this.$set(_this.tableData[j], "gain", data[i].gain);
                        _this.$set(_this.tableData[j], "open", data[i].open);
                        _this.$set(_this.tableData[j], "low", data[i].low);
                        _this.$set(_this.tableData[j], "close", data[i].close);
                        _this.$set(_this.tableData[j], "volum", data[i].volum);
                        _this.$set(_this.tableList[j], "isBreath", isBreaths);
                        _this.$set(
                          _this.tableData[j],
                          "amount",
                          data[i].amount
                        );
                        _this.$set(
                          _this.tableData[j],
                          "chg",
                          data[i].latestPrice - data[i].close
                        );
                      });
                    }
                    // 赋值后退出里层循环
                    break;
                  }
                }
              }
            }
          }
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/pagination.less";
.hk_mother {
  background: @deepBg;
  box-sizing: border-box;
  position: relative;
  .stock_list_table {
    .red_breathing {
      animation: glow3 3000ms ease-out infinite alternate;
      border-right: none !important;
    }
    .green_breathing {
      animation: glow3 3000ms ease-out infinite alternate;
      border-right: none !important;
    }
    @-webkit-keyframes glow3 {
      0% {
        opacity: 0.2;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 0.8;
      }
    }
    @keyframes glow3 {
      0% {
        opacity: 0.2;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 0.8;
      }
    }
    .header_stock {
      height: 40px;
    }
    .el-table__header {
      th {
        border-bottom: 1px solid @LightBorderLine;
        border-top: 1px solid @LightBorderLine;
        border-right: 1px solid @LightBorderLine;
      }
      th:first-child {
        border-left: 1px solid @LightBorderLine;
      }
      .cell {
        font-size: 12px;
        height: 100%;
        color: @Dark_gray !important;
        font-weight: normal;
        line-height: 35px;
      }
      .stock_list_right {
        .cell {
          text-align: left;
        }
      }
      .stock_list_center {
        .cell {
          text-align: left;
        }
      }
      .stock_list_left {
        background: @deepBg;
        .cell {
          text-align: left;
        }
      }
    }
    .el-table__body {
      cursor: pointer;
      .el-table__row {
        .stock_list_left {
          background: @deepBg;
          padding: 5px 0;
          .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
          .stock_list_h2 {
            padding-left: 29px;
            position: relative;
            font-size: 12px;
            color: @fff;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; //需要控制的文本行数
              overflow: hidden;
            }
          }
          .stock_list_p {
            font-size: 12px;
            color: @fff;
            line-height: 16px;
          }
        }
        .stock_list_center {
          .cell {
            color: @fff;
            font-size: 12px;
            text-align: left;
          }
        }
        .stock_list_right {
          background: @deepBg;
          .cell {
            text-align: left;
            color: @fff;
            font-size: 14px;
            padding-right: 25px;
          }
        }
        td {
          border-right: 1px solid @LightBorderLine;
          border-bottom: 1px solid @LightBorderLine;
          .cell {
            font-size: 12px;
            color: @fff;
            line-height: 30px;
            h2 {
              font-size: 12px;
            }
          }
        }
        td:first-child {
          border-left: 1px solid @LightBorderLine;
        }
      }
      .el-table__row.hover-row {
        background: @sideColor;
        .stock_list_left {
          background: @sideColor;
        }
      }
    }
    .el-table__fixed {
      bottom: 8px !important;
    }
    .el-table__fixed::before {
      display: none;
    }
    .stock_list_left {
      background: @sideColor;
    }
  }
}
</style>